<template>
  <section class="page strategy-config">
    <data-form :model="model" @onSearch="refreshData" :page="pageService">
      <template slot="inputs">
        <el-form-item label="策略名称" prop="name">
          <el-input v-model="model.name"></el-input>
        </el-form-item>
        <el-form-item label="策略类型" prop="strategyType">
          <el-select v-model="model.strategyType" placeholder="请选择" clearable>
            <el-option v-for="{ code, name } in $dict.getDictData('StrategyType')" :key="code" :label="name" :value="code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="commonState">
          <el-select v-model="model.commonState" placeholder="请选择" clearable>
            <el-option v-for="{ code, name } in $dict.getDictData('CommonState')" :key="code" :label="name" :value="code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="案件类型" prop="strategyCaseType">
          <el-select v-model="model.strategyCaseType" placeholder="请选择" clearable>
            <el-option v-for="{ code, name } in $dict.getDictData('StrategyCaseType')" :key="code" :label="name" :value="code">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <data-box @onPageChange="refreshData" :data="dataSet" :page="pageService">
      <template slot="buttons">
        <el-button @click="addClick">新增策略</el-button>
      </template>
      <template slot="columns">
        <el-table-column label="策略名称" prop="name" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <el-table-column label="策略类型" prop="strategyType" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dictConvert(row.strategyType,'StrategyType')">
        </el-table-column>
        <el-table-column label="状态" prop="commonState" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dictConvert(row.commonState,'CommonState')"></el-table-column>
        <el-table-column label="案件类型" prop="strategyCaseType" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dictConvert(row.strategyCaseType,'StrategyCaseType')"></el-table-column>
        <el-table-column label="优先级" prop="priority" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateTimeFormat(row.createTime)">
        </el-table-column>
        <el-table-column label="创建人" prop="operatorRealName" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="modifyClick(scope)">修改</el-button>
            <el-button type="text" size="small" @click="deleteClick(scope)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>

    <el-dialog :title="id ? '修改策略':'新增策略'" width="1050px" :center="true" :visible.sync="dialog.config" @open="$nextTick(()=>$refs['modify-config'].refresh())" @close="$refs['modify-config'].initData()">
      <modify-config @close="dialog.config = false" @success="onSuccess" :strategyId="id" ref="modify-config"></modify-config>
    </el-dialog>

  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import { State, Getter } from "vuex-class";
import { PageService } from "~/utils/page.service";
import { SortService } from '~/utils/sort.service';
import ModifyConfig from "~/components/system-manage/strategy-config/modify-config.vue";
import { StrategyConfigService } from "~/services/management-service/strategy-config.service";
import { CaseApplyRecordService } from "~/services/domain-service/case-apply-record.service";
import { ApplyType} from "~/config/enum.config";

// @Auth(1002)
@Layout("workspace")
@Component({
  components: {
    DataForm,
    DataBox,
    ModifyConfig
  }
})
export default class StrategyConfig extends Vue {
  @Dependencies(StrategyConfigService) private strategyConfigService: StrategyConfigService;
  @Dependencies(CaseApplyRecordService)
  private caseApplyRecordService: CaseApplyRecordService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;

  private id:string = ""
  // 数据列表
  private dataSet: any[] = [];
  // 当前行数据
  private rowData: any = null
  // 弹框控制
  private dialog: any = {
    config: false,
  };
  private deleteApplyType = ApplyType.deleteStrategy.value;

  private model: any = {
    name: "",
    strategyType: "",
    commonState: "",
    strategyCaseType: ""
  };

  private refreshData() {
    this.strategyConfigService.queryStrategyConfigPage(this.model, this.pageService).subscribe(
      data => this.dataSet = data
    )
  
  }

  private mounted() {
    this.refreshData();
  }

  private onSuccess(){
    this.$nextTick(() => this.id = "")
    this.refreshData()
  }

  /**
   * 新增点击
   */
  private addClick() {
    this.id = ""
    this.dialog.config = true
  }

  /**
   * 修改点击
   */
  private modifyClick(scope) {
    console.log(scope,"scope")
    this.id = scope.row.id
    console.log(this.id,"修改id")
    this.dialog.config = true
  }

  /**
   * 删除点击
   */
  private deleteClick(scope) {
    this.$confirm(`您确定要删除该策略吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      const deleteId = scope.row.id
      this.strategyConfigService.delete(deleteId).subscribe(this.refreshData)
    });
    
  }
}
</script>

<style lang="less" >
</style>
